<template>
  <div class="agent-statistics">
    <el-row :gutter="20">
      <!-- 商户统计 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>商户统计</span>
          </template>
          <div class="statistics-card">
            <div class="stat-item">
              <div class="stat-label">商户总数</div>
              <div class="stat-value">{{ merchantData.total }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">今日订单</div>
              <div class="stat-value">{{ merchantData.today_orders }}</div>
            </div>
            <div class="chart-container">
              <div class="chart-title">近7天订单趋势</div>
              <div ref="merchantChart" class="chart" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 供应商统计 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>供应商统计</span>
          </template>
          <div class="statistics-card">
            <div class="stat-item">
              <div class="stat-label">供应商总数</div>
              <div class="stat-value">{{ supplierData.total }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">今日订单</div>
              <div class="stat-value">{{ supplierData.today_orders }}</div>
            </div>
            <div class="chart-container">
              <div class="chart-title">近7天订单趋势</div>
              <div ref="supplierChart" class="chart" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getAgentStatistics } from "@/api/dashboard/agent";

interface StatisticsData {
  merchant: {
    total: number;
    today_orders: number;
    week_orders: number[];
  };
  supplier: {
    total: number;
    today_orders: number;
    week_orders: number[];
  };
}

const merchantData = ref({
  total: 0,
  today_orders: 0,
  week_orders: [],
});

const supplierData = ref({
  total: 0,
  today_orders: 0,
  week_orders: [],
});

const merchantChart = ref<HTMLElement>();
const supplierChart = ref<HTMLElement>();

// 初始化图表
function initChart(el: HTMLElement, data: number[], title: string) {
  const chart = echarts.init(el);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: title,
        type: "bar",
        data: data,
        itemStyle: {
          color: "#409EFF",
        },
      },
    ],
  };
  chart.setOption(option);
  return chart;
}

// 获取统计数据
async function fetchData() {
  const res = await getAgentStatistics();
  res.supplier.week_orders = res.supplier.week_orders.map((item: any) => item.cnt);
  res.merchant.week_orders = res.merchant.week_orders.map((item: any) => item.cnt);
  merchantData.value = res.merchant;
  supplierData.value = res.supplier;

  // 渲染图表
  nextTick(() => {
    if (merchantChart.value && supplierChart.value) {
      initChart(merchantChart.value, merchantData.value.week_orders, "商户订单");
      initChart(supplierChart.value, supplierData.value.week_orders, "供应商订单");
    }
  });
}

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="scss">
.agent-statistics {
  padding: 20px;

  .statistics-card {
    padding: 10px;

    .stat-item {
      margin-bottom: 20px;

      .stat-label {
        font-size: 14px;
        color: #666;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        margin-top: 5px;
      }
    }

    .chart-container {
      margin-top: 30px;

      .chart-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }

      .chart {
        height: 300px;
      }
    }
  }
}
</style>
